<template>
  <el-dialog 
    class="cancel-game"
    :visible="visible"
    :title="'请选择取消比赛的原因'"
    size="tiny"
    :before-close="handleClose">
    <el-radio-group v-model="cancelCase">
      <el-radio v-for="item in cancelOptions" :key="item.value" class="radio" :label="item.value">{{item.label}}</el-radio>
    </el-radio-group>
    <el-row style="margin-top:10px;">
      <el-col :span="3">
        <label>备注</label>
      </el-col>
      <el-col :span="21">
        <el-input  type="textarea" :rows="2"  placeholder="请输入备注" :maxlength="300" v-model="remark">
        </el-input>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel()">取 消</el-button>
      <el-button type="primary" @click="handleConfirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      cancelOptions: [
        {label: '天气不好', value: 0},
        {label: '场地安排原因', value: 1},
        {label: '其他', value: 2}
      ],
      cancelCase: 0,
      remark: ''
    }
  },
  methods: {
    handleCancel () {
      this.$emit('close')
    },
    handleConfirm () {
      this.$emit('confirm', {
        cancelCase: this.cancelOptions[this.cancelCase].label,
        remark: this.remark
      })
    },
    handleClose () {
      if (this.visible) {
        this.$emit('update:visible', false) // 更新父组件的状态
        this.$emit('close')
      }
    }
  }
}
</script>

<style>
.cancel-game .el-dialog{
  width: 420px;
}
</style>
